<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Flexigrid</title>
		<link rel="stylesheet" type="text/css" href="css/flexigrid.css" />
		<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
		<script type="text/javascript" src="flexigrid.js"></script>
		<script type="text/javascript">
	function checkeds(kk) {
		var checks = document.getElementsByName('userCheck');
		for ( var count = 0; count < checks.length; count++) {
			if (kk.checked)
				checks[count].checked = true;
			else
				checks[count].checked = false;
		}
	}
	$(document).ready( function() {

		$("#flex1").flexigrid( {
			url :'GetUsersList.action',
			dataType :'json',
			colModel : [ {
				display :'全选',
				name :'getAll',
				width :50,
				align :'center'
			}, {
				display :'编号',
				name :'id',
				width :40,
				sortable :true,
				align :'center'
			}, {
				display :'名称',
				name :'name',
				width :40,
				sortable :true,
				align :'center'
			}, {
				display :'邮箱',
				name :'email',
				width :180,
				sortable :true,
				align :'left'
			}, {
				display :'年龄',
				name :'age',
				width :120,
				sortable :true,
				align :'left'
			}, {
				display :'密码',
				name :'password',
				width :130,
				sortable :true,
				align :'left',
				hide :true
			}, {
				display :'备注',
				name :'numcode',
				width :80,
				sortable :true,
				align :'right'
			} ],
			buttons : [ {
				name :'增加',
				bclass :'add',
				onpress :test
			}, {
				name :'删除',
				bclass :'delete',
				onpress :test
			}, {
				separator :true
			}, {
				name :'A',
				onpress :sortAlpha
			}, {
				name :'B',
				onpress :sortAlpha
			}, {
				name :'C',
				onpress :sortAlpha
			}, {
				name :'D',
				onpress :sortAlpha
			}, {
				name :'E',
				onpress :sortAlpha
			}, {
				name :'F',
				onpress :sortAlpha
			}, {
				name :'G',
				onpress :sortAlpha
			}, {
				name :'H',
				onpress :sortAlpha
			}, {
				name :'I',
				onpress :sortAlpha
			}, {
				name :'J',
				onpress :sortAlpha
			}, {
				name :'K',
				onpress :sortAlpha
			}, {
				name :'L',
				onpress :sortAlpha
			}, {
				name :'M',
				onpress :sortAlpha
			}, {
				name :'N',
				onpress :sortAlpha
			}, {
				name :'O',
				onpress :sortAlpha
			}, {
				name :'P',
				onpress :sortAlpha
			}, {
				name :'Q',
				onpress :sortAlpha
			}, {
				name :'R',
				onpress :sortAlpha
			}, {
				name :'S',
				onpress :sortAlpha
			}, {
				name :'T',
				onpress :sortAlpha
			}, {
				name :'U',
				onpress :sortAlpha
			}, {
				name :'V',
				onpress :sortAlpha
			}, {
				name :'W',
				onpress :sortAlpha
			}, {
				name :'X',
				onpress :sortAlpha
			}, {
				name :'Y',
				onpress :sortAlpha
			}, {
				name :'Z',
				onpress :sortAlpha
			}, {
				name :'#',
				onpress :sortAlpha
			}

			],
			searchitems : [ {
				display :'编号',
				name :'id'
			}, {
				display :'名称',
				name :'name',
				isdefault :true
			} ],
			sortname :"id",
			sortorder :"asc",
			usepager :true,
			title :'用户列表',
			useRp :true,
			rp :10,
			showTableToggleBtn :false,//折叠
			resizable :false,
			striped :true, //是否显示斑纹效果，默认是奇偶交互的形式
			width :800,
			height :255,
			pagestat :'查看 {from} 到 {to} 的 {total} 结果',
			procmsg :'处理中,请稍后 …',//正在处理的提示信息,
			nomsg :'没有结果',
			searchTitle :'请输入搜索内容:',
			searchButton :'搜索',
			pageContext :'第',
			pageOf :'至'
		});

	});
	function sortAlpha(com) {
		jQuery('#flex1').flexOptions( {
			url :'GetUserByName.action',
			newp :1,
			params : [ {
				name :'letter_pressed',
				value :com
			}, {
				name :'qtype',
				value :$('select[name=qtype]').val()
			} ]
		});
		jQuery("#flex1").flexReload();
	}

	function test(com, grid) {
		if (com == '删除') {
			if ($('.trSelected', grid).length > 0) {
				if (confirm('Delete ' + $('.trSelected', grid).length + ' items?')) {
					var items = $('.trSelected', grid);
					var itemlist = '';
					for (i = 0; i < items.length; i++) {
						itemlist += items[i].id.substr(3) + ",";
					}
					$.ajax( {
						type :"POST",
						dataType :"json",
						url :"delete.php",
						data :"items=" + itemlist,
						success : function(data) {
							alert("Query: " + data.query
									+ " - Total affected rows: " + data.total);
							$("#flex1").flexReload();
						}
					});
				}
			} else {
				return false;
			}
		} else if (com == '增加') {
			var checks = document.getElementsByName('userCheck');
			for ( var count = 0; count < checks.length; count++) {
				if (checks[count].checked)
					alert("value:" + checks[count].value);
			}
			alert('Add New Item Action');
		}
	}
</script>
	</head>

	<body>
		<h1>
			Flexigrid Example Page
		</h1>
		<a href="http://webplicity.net/flexigrid/">Flexigrid home</a>
		<a href="http://codeigniter.com/forums/viewthread/75326">Flexigrid
			discussion on CodeIgniter forum</a>
		<br />
		<br />
		<b>Demonstrating the flexgrid with search and delete functionality</b>
		<br />
		<br />
		<table id="flex1" style="display: none"></table>
		<br />
		<br />
		<a href="flexigrid.zip">Download this example</a>
	</body>
</html>